<template>
  <el-result v-if="!hasData" icon="info" title="还没有参加考试">
    <template #extra>
      <br />
      <br />
      <el-button @click="router.back()" type="primary"
        >返回我的考试列表</el-button
      >
    </template>
  </el-result>

  <div v-else class="grid-container">
    <el-card
      v-for="item in exam"
      :key="item.contestId"
      shadow="hover"
      class="contest-card"
      @click="setContestId(item.contestId)"
    >
      <div class="flex justify-between items-center">
        <div class="contest-name">
          <a
            class="text-contest-name"
            :href="'#' + item.contestId"
          >
            {{ item.contestName }}
          </a>
        </div>
        <div class="contest-duration">
          <span class="text-name">考试时间：</span>
          <span class="text-value"
            >{{ item.startTime }}~{{ item.endTime }}</span
          >
        </div>
      </div>
      <div class="contest-status">
        <span class="text-name">考试状态：</span>
        <span
          class="text-sm font-semibold"
          :class="{
            'text-gray-500': item.contestStatus === '未开始',
            'text-green-500': item.contestStatus === '进行中',
            'text-red-500': item.contestStatus === '已结束',
          }"
        >
          {{ item.contestStatus }}
        </span>
      </div>
      <div class="contest-difficulty">
        <span class="text-name">考试难度：</span>
        <el-tag
          :type="
            item.contestDifficulty === '简单'
              ? 'success'
              : item.contestDifficulty === '中等'
              ? 'warning'
              : 'danger'
          "
          effect="dark"
          size="default"
          class="ml-1"
        >
          {{ item.contestDifficulty }}
        </el-tag>
      </div>
      <div class="contest-description">
        <span class="text-name">考试类型：</span>
        <span class="text-value">{{ item.contestType }}</span>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import contestQuery from "@/api/modules/contestQuery";
import { ref, onMounted } from "vue";
import router from "@/router";
import { userInfo } from "@/stores/userinfo.js";
const hasData=ref(false);
const exam = ref(null);
const userStore = userInfo();

onMounted(async () => {
  try {
    const res = await contestQuery.queryContest(userStore.userInfo.userId);
    if(res.data.length!=0){
      hasData.value=true;
    }
    exam.value = res.data;
  } catch (error) {
    console.error("获取考试数据失败:", error);
  }
});

const onSubmit = () => {
  console.log("submit!");
};

const setContestId = (id: any) => {
  userStore.onGoingContest = id;
  router.push("/contest/wait");
};
</script>

<style scoped>
.form-inline .el-input {
  --el-input-width: 180px;
}

.form-inline .el-select {
  --el-select-width: 180px;
}

.form-inline .el-form-item {
  margin-right: 12px;
  margin-bottom: 12px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.contest-card {
  width: 100%;
  height: auto;
}

.el-card:hover {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
  border-color: #409eff;
  transform: scale(1.02);
}

.text-contest-name {
  font-size: 18px;
  color: #2976fc;
  font-weight: bold;
  text-decoration: none;
}

.contest-name {
  margin-bottom: 10px;
}

.text-name {
  font-size: 13px;
  font-weight: bold;
}
.text-value {
  font-size: 14px;
  color: #777;
}
.contest-duration,
.contest-status,
.contest-difficulty,
.contest-description {
  margin-top: 8px;
}
.text-gray-500 {
  color: #606266;
}
.text-green-500 {
  color: #67c23a;
}
.text-red-500 {
  color: #f56c6c;
}

/* 响应式布局调整 */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1200px) {
  .grid-container {
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  }
}
</style>
